<template>
	<view>
		<view class="tabbarTop">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view 
					class="scroll-view-item_H" 
					v-for="(item,index) in tabBars" 
					:key="index" 
					@click="indexBtn(index)"
					:style="{color:index==tabIndex?selectedTextColor:textColor}"
				>
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		
		<view class="uni-margin-wrap">
			<swiper class="swiper" :current="tabIndex" @change="swiperTab">
				<swiper-item >
					<view class="swiper-item">A</view>
				</swiper-item>
				<swiper-item >
					<view class="swiper-item">B</view>
				</swiper-item>
				<swiper-item >
					<view class="swiper-item">C</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		
		data() {
			return {
				selectedTextColor:'red',
				textColor:'#000',
				tabIndex:0,
				tabBars: [{
					name: "阅读",
					id: 0
				}, {
					name: "图文",
					id: 1
				}, {
					name: "问答",
					id: 2
				}, {
					name: "视频",
					id: 3
				}, {
					name: "小记",
					id: 4
				}, {
					name: "55555",
					id: 5
				}, {
					name: "66666",
					id: 6
				}]
			}
		},
		methods: {
			indexBtn(item) {
				this.tabIndex=item;
				console.log(item);
			},
			swiperTab(e) {
				this.tabIndex = e.detail.current //获取索引
			}
		}
	}
</script>

<style scoped lang="scss">
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 25%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		border-right: 1px solid red;
	}
</style>
